<template>
  <div id="container">
    <chartTitle :title="title"></chartTitle>
    <div class="main" :id="id"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import autoSize from '../../uitils/auto-font-size.js'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle,
  },
  name: 'chart-shadow-line',
  props: {
    title: String,
    color: {
      type: Array,
      default: () => {
        return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
      },
    },
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  computed: {
    id: function () {
      return `main-${Math.random()}`
    },
    chartData: function () {
      let obj = {
        legendData: [],
        xAxisData: [],
        seriesData: [],
      }
      for (let key in this.data) {
        // 先填legend
        obj.legendData.push(key)
        // 处理类目数据
        let seriesObj = {
          name: key,
          type: 'line',
          symbol: 'circle',
          data: [],
          areaStyle: {
            opacity: 0.3,
          },
        }
        // 处理X轴
        this.data[key].map((item) => {
          obj.xAxisData.push(item.name)
          seriesObj.data.push(item.value)
        })
        obj.xAxisData = Array.from(new Set(obj.xAxisData))
        obj.seriesData.push(seriesObj)
      }
      return obj
    },
  },
  mounted() {
    setTimeout(() => {
      this.onInit()
    }, 3500)
  },
  updated() {
    setTimeout(() => {
      this.onInit()
    }, 1000)
  },
  methods: {
    onInit() {
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var option

      option = {
        animationDuration: 4000,
        animationDurationUpdate: 2000,
        tooltip: {
          trigger: 'axis',
        },
        color: this.color,
        legend: {
          right: 22,
          top: 19,
          data: this.chartData.legendData,
          textStyle: {
            fontSize: autoSize(14),
            color: '#fff',
          },
          // icon: 'line',
          lineStyle: {
            type: 'solid',
          },
          itemWidth: 10,
        },
        grid: {
          left: 18,
          right: 21,
          bottom: 21,
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          // boundaryGap: ['50%', '50%'],
          data: this.chartData.xAxisData,
          axisLabel: {
            color: '#fff',
          },
          axisLine: {
            lineStyle: {
              color: '#306269',
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(48, 98, 105, .2)',
            },
          },
        },
        series: this.chartData.seriesData,
      }
      option && myChart.setOption(option, true)
      window.addEventListener('resize', () => {
        this.$nextTick(() => {
          myChart.resize()
        })
      })
    },
  },
}
</script>

<style lang="less" scoped>
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

#container {
  width: 100%;
  height: 30.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, 0.2);
  display: flex;
  flex-flow: column;

  .main {
    flex: 1;
  }
}
</style>
